#{extends 'tags/layouts/main.html' /}
#{set title:'Home' /}

#{set 'moreStyles'}
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/leaflet-0.7.3/leaflet.css'}">
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/leaflet-contextmenu/leaflet.contextmenu.css'}">
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/leaflet-draw/leaflet.draw.css'}">
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/leaflet-locate/L.Control.Locate.min.css'}">
    <!-- for load photo -->
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/lib/Leaflet.Photo.css'}">
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/lib/cluster/MarkerCluster.css'}">
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/lib/photo.css'}">
    <!--[if lt IE 9]>
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" />
      <link rel="stylesheet" href="@@{'/public/plugin/leaflet-locate/L.Control.Locate.ie.min.css'}"/>
    <![endif]-->
#{/set}

<div class="map">
    <div id="MainMap" class="height-full width-full"></div>
</div>

#{set 'moreScripts'}
    <script src="@@{'/public/plugin/leaflet-0.7.3/leaflet-src.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/plugin/leaflet-contextmenu/leaflet.contextmenu-src.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/plugin/leaflet-draw/leaflet.draw-src.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/plugin/leaflet-locate/L.Control.Locate.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <!-- for load photo -->
     <script src="@@{'/public/plugin/lib/reqwest.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/plugin/lib/cluster/leaflet.markercluster.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/plugin/lib/Leaflet.Photo.js'}" type="text/javascript" charset="${_response_encoding}"></script> 
    <script type="text/javascript">
        journey_id = ${id};
    </script>
    <script src="@@{'/public/js/site/journey.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <!-- for load photo -->
    <!-- <script src="@@{'/public/js/site/photo.js'}" type="text/javascript" charset="${_response_encoding}"></script> -->
#{/set}